﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVCTable Example</title>
    <!-- 把CSS样式代码放在style标签内，且放在head部分 -->
    <style>
        #mvctable {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }

            #mvctable th,
            #mvctable td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }

            #mvctable th {
                background-color: #f2f2f2;
            }
    </style>
</head>

<body>
    <span>仓库管理（Tree）</span>
        <div class="layui-btn-container" style="text-align:right;">
            <label>负责人</label>
            <div class="layui-input-inline layui-input-wrap">
            <input type="text" id="WarehouseName" lay-verify="required" autocomplete="off" lay-reqtext="请输入负责人" lay-affix="clear" class="layui-input demo-phone">
            </div>
        <button type="button" class="layui-btn layui-btn-normal" id="mvctable">
            查询
        </button> 
    <table id="mvctable">
        <thead>
            <tr>
                <th>仓库名称</th>
                <th>仓库地址</th>
                <th>仓库类型</th>
                <th>仓库负责人</th>
                <th>负责人联系方式</th>
                <th>创建时间</th>
                <th>修改时间</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <!-- 把JavaScript代码放在script标签内，且放在body标签结束前，确保DOM元素已加载完成 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
            var WarehouseName = $('#WarehouseName').val();
            $(mvctable).ready(function () {
            // 调用函数获取并渲染数据
                WarehouseName = $('#WarehouseName').val();
            getDataAndRenderTable();
        });
        function getDataAndRenderTable(){
            $.ajax({
                    url: '@ViewBag.Keep' + '/api/Department/WarehouseList?WarehouseName=' + WarehouseName,
                            type: 'GET',
                dataType: 'json',
                success: function (response) {
                    // 清空表格原有的数据（如果有的话）
                    $('#mvctable tbody').empty();
                    // 遍历数据并创建表格行
                    $.each(response.data, function (index, item) {
                        var row = $('<tr></tr>');
                        row.append($('<td></td>').text(item.warehouseName));
                        row.append($('<td></td>').text(item.warehouseAddress));
                        row.append($('<td></td>').text(item.warehouseType));
                        row.append($('<td></td>').text(item.responsiblePerson));
                        row.append($('<td></td>').text(item.contactInfo));
                        row.append($('<td></td>').text(item.createdTime));
                        row.append($('<td></td>').text(item.modifiedTime));
                        $('#mvctable tbody').append(row);
                        console.log(item);
                    });
                },
                error: function (error) {
                    console.error('获取数据出错:', error);
                }
        });
        }
  
    </script>
</body>

</html>
